<template>
  <div>
    <!-- spu模块与属性模块类似，第一个card放置三级分类菜单，第二个card放置表单 -->
    <el-card style="margin:20px 0">
      <!-- 三级菜单组件 -->
      <catogory-select @getCategoryId="getCategoryId" :isShowTable="scene===0"></catogory-select>
    </el-card>
    <el-card>
      <!-- scene = 0 -->
      <transition name="el-fade-in">
        <div v-show="scene===0">
          <!-- 添加SPU按钮 -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-bottom:15px"
            :disabled="!category3Id"
            @click="addSpu(category3Id)"
          >添加SPU</el-button>

          <!-- 商品种类SPU表格 -->
          <el-table :data="records" border style="width: 100%">
            <el-table-column prop="prop" label="序号" width="80" align="center" type="index"></el-table-column>
            <el-table-column prop="spuName" label="SPU名称"></el-table-column>
            <el-table-column prop="description" label="SPU描述"></el-table-column>
            <el-table-column prop="prop" label="操作">
              <template v-slot="{row,$index}">
                <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="addSku(row)"></hint-button>
                <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="updateSpu(row)"></hint-button>
                <hint-button type="info" icon="el-icon-info" size="mini" title="提示spu" @click="handleSkuList(row)"></hint-button>
                <el-popconfirm :title="`你确定要删除'${row.spuName}'吗？`" @onConfirm="deleteSpu(row)">
                  <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference"></hint-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <!-- 点击【提示spu】对话框 -->
          <el-dialog :title="`${spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table border :data="skuList" v-loading="loading">
              <el-table-column property="skuName" label="名称" width="150"></el-table-column>
              <el-table-column property="price" label="价格" width="200"></el-table-column>
              <el-table-column property="weight" label="重量"></el-table-column>
              <el-table-column property="prop" label="默认图">
                <template v-slot="{row,$index}">
                  <img :src="row.skuDefaultImg" style="width:100px;height:100px" alt />
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>

          <!-- 底部分页器 -->
          <el-pagination
            :current-page="page"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="limit"
            layout="prev, pager, next, jumper, ->, sizes, total"
            :total="total"
            style="text-align:center; margin-top:15px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </transition>

      <!-- scene = 1 -->
      <transition name="el-fade-in">
        <!-- SpuForm组件 -->
        <spu-form v-show="scene===1" @changeScene="changeScene" ref="spu"></spu-form>
      </transition>

      <!-- scene = 2 -->
      <transition name="el-fade-in">
        <sku-form v-show="scene===2" ref="sku" @changeScene="changeScene"></sku-form>
      </transition>
    </el-card>
  </div>
</template>

<script>
// 引入子组件spuForm和skuForm
import SpuForm from './spuForm'
import SkuForm from './skuForm'
export default {
  name: 'Spu',
  // 注册组件
  components: {
    'spu-form': SpuForm,
    'sku-form': SkuForm
  },
  data () {
    return {
      isShowTable: true,
      // 三级列表id
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 获取spu列表所需数据(page,limit,category3Id)
      // 页数
      page: 1,
      // 每页展示数据量
      limit: 5,
      // 获取到的spu数据
      records: [],
      total: 0,
      // 页面切换标识(默认0展示spu列表，1为添加/修改spu，2为添加sku)
      scene: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 存放每个spu里的skuList信息
      skuList: [],
      spuName: '',
      loading: true
    }
  },
  methods: {
    handleSizeChange (limit) {
      this.limit = limit
      this.getSpuList()
    },

    handleCurrentChange (page) {
      this.page = page
      this.getSpuList()
    },

    // 获取各级商品id
    getCategoryId ({ categoryId, level }) {
      // 也可以用if...else判断level等级
      // level === 1 ? this.category1Id = categoryId : level === 2 ? this.category2Id = categoryId : this.category3Id = categoryId
      if (level === 1) {
        this.category1Id = categoryId
        // 每次id参数更新都要清空原id
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        // 当收到三级菜单的id参数，意味着参数收集完成，开始发送请求获取商品基本属性
        this.category3Id = categoryId
        // console.log('查询商品中...')
        // 获取spu商品列表
        this.getSpuList()
      }
    },

    // 获取spuList列表数据
    // 默认page = 1
    async getSpuList () {
      const { page, limit, category3Id } = this
      const result = await this.$api.spu.reqSpuList(page, limit, category3Id)
      if (result.code === 200) {
        this.records = result.data.records
        this.total = result.data.total
      }
    },

    // 添加spu按钮回调
    addSpu (category3Id) {
      // 页面切换
      this.scene = 1
      // 通知spuForm子组件获取品牌信息，和属性信息
      this.$refs.spu.addSpuData(category3Id)
    },

    // 修改spu按钮回调
    updateSpu (row) {
      // row包含了所需要的spuId等信息
      // console.log(row)
      // 初始化子组件数据
      this.$refs.spu.initSpuData(row)
      this.scene = 1
    },

    // spuForm/skuForm子组件取消按钮回调
    changeScene ({ scene, flag }) {
      this.scene = scene
      // 如果添加spu，返回最后一页；修改spu，返回当前页
      if (flag === '添加') {
        this.page = 1
      }
      // 重新获取spuList列表数据
      this.getSpuList()
    },

    // 删除指定spu
    async deleteSpu (row) {
      const result = await this.$api.spu.reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message.success('删除成功!')
        // 当前页数据记录为0则返回上一页
        this.page = this.records.length > 1 ? this.page : this.page - 1
        // 重新获取数据
        this.getSpuList()
      }
    },

    // 添加sku按钮回调
    addSku (row) {
      this.scene = 2
      // 把category各级id数据和spu对象传入到skuForm中
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },

    // 点击【提示spu】按钮回调
    async handleSkuList (spu) {
      // console.log(spu)
      this.spuName = spu.spuName
      // 显示dialog对话框
      this.dialogTableVisible = true
      // 根据所选的spu发送请求获取skuList
      const result = await this.$api.spu.reqSkuList(spu.id)
      // 获取到skuList数据后结束加载
      this.loading = false
      // console.log(result)
      this.skuList = result.data
    },

    // 关闭dialog对话框的回调
    close (done) {
      // 重置loading属性
      this.loading = true
      // 清除旧有的skuList数据
      this.skuList = []
      done()
    }
  }
}
</script>

<style>
</style>
